﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title></title>
		<meta charset="utf-8" />
		<script src="js/digit.js"></script>
		<script src="js/tools.js"></script>
		<script type="text/javascript">
			function $$(id) {
				return document.getElementById(id);
			}
			window.onload = function() {
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");

				setInterval(function() {
						cxt.clearRect(0, 0, cnv.width, cnv.height);
						var d = new Date();
						
						
						var h = d.getHours();
						var h1 = Math.floor(h % 10);
						var h10 = Math.floor(h / 10);
						drawDigit(cxt,h10,0);
						drawDigit(cxt,h1,7);
						
						drawDigit(cxt,"colon",14);
						
						var m = d.getMinutes();
						var m1 = Math.floor(m % 10);
						var m10 = Math.floor(m / 10);
						drawDigit(cxt,m10,18);
						drawDigit(cxt,m1,25);
						
						drawDigit(cxt,"colon",32);

						
						var s = d.getSeconds();
						var s1 = Math.floor(s % 10);
						var s10 = Math.floor(s / 10);
						drawDigit(cxt,s10,36);
						drawDigit(cxt,s1,43);
				}, 1000)
			}
		</script>
	</head>

	<body>
		<canvas id="canvas" width="1200" height="600" style="border:1px solid silver;"></canvas>
	</body>

</html>